import React, { FC } from 'react'
import { useDispatch } from 'react-redux'
import useGetComponentInfo from '../../../../hooks/useGetComponentInfo'
import {
    getComponentConfigByType,
    ComponentPropsType,
} from '../../../../components/QuestionComponents/index'
import { changeComponentProps } from '../../../../store/componentsReducer'
const NoProp: FC = () => {
    return <div style={{ textAlign: 'center' }}>未选中组件</div>
}
const ComponentProp: FC = () => {
    const dispatch = useDispatch()
    const { selectedComponent } = useGetComponentInfo()

    if (selectedComponent == null) return <NoProp />

    const { type, props, isLocked, isHidden } = selectedComponent
    const componentConfig = getComponentConfigByType(type)
    if (componentConfig == null) return <NoProp />

    // 解构出prop组件
    const { PropComponent } = componentConfig

    // 当prop组件更新form内容时，将form内容同步更新到画布中去
    const handleOnChange = (newProps: ComponentPropsType) => {
        if (selectedComponent == null) return
        const { fe_id } = selectedComponent
        dispatch(changeComponentProps({ fe_id, newProps }))
    }

    return (
        <div>
            <PropComponent {...props} onChange={handleOnChange} disabled={isLocked || isHidden} />
        </div>
    )
}
export default ComponentProp
